<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./font/iconfont.js"></script>
    <title>23201012102--刘启俊--小米商城</title>

</head>

<body>
    <header>
        <nav class="top_nav">
            <div class="search">
                <div class="logo">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-xiaomiguishu"></use>
                    </svg>
                </div>
                <div class="box" onclick="location.href='search.html'">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div>搜索商品</div>
                </div>
                <div class="service">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                </div>
            </div>
        </nav>
    </header>


    <section>
        <div class="toTop" onclick="toTop()">返回顶部</div>
        <div class="lunbo">
            <div class="banner">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./Image/banner/banner1.jpg" alt="banner1">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Image/banner/banner2.png" alt="banner2">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Image/banner/banner3.jpg" alt="banner3">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Image/banner/banner4.jpg" alt="banner4">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./Image/banner/banner5.png" alt="banner5">
                        </a>
                    </li>
                </ul>
            </div>
            <ul class="banner_ul">
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi"></use>
                    </svg>
                    <span>官方商城</span>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengpinbaozhang"></use>
                    </svg>
                    <span>正品保障</span>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-box"></use>
                    </svg>
                    <span>满69包邮</span>
                </li>
            </ul>
        </div>
        <div class="type_list" id="fix_test">
            <ul class="type" id="slist">
                <li>
                    <img src="./Image/type/t0.png">
                    <a href="">小米上新</a>
                </li>
                <li>
                    <img src="./Image/type/t3.png">
                    <a href="">电视</a>
                </li>
                <li>
                    <img src="./Image/type/t2.png">
                    <a href="">小米发布</a>
                </li>
                <li>
                    <img src="./Image/type/t4.png">
                    <a href="">空冰洗</a>
                </li>
                <li>
                    <img src="./Image/type/t5.png">
                    <a href="">米金商城</a>
                </li>
                <li>
                    <img src="./Image/type/t6.png">
                    <a href="">小米众筹</a>
                </li>
                <li>
                    <img src="./Image/type/t7.png">
                    <a href="">笔记本</a>
                </li>
                <li>
                    <img src="./Image/type/t8.png">
                    <a href="">生活电器</a>
                </li>
                <li>
                    <img src="./Image/type/t9.png">
                    <a href="">智能家居</a>
                </li>
                <li>
                    <img src="./Image/type/t1.png">
                    <a href="">手机</a>
                </li>
            </ul>
        </div>

        <div class="tab">
            <div class="tt" id="fixed">
                <span class="cur">精选<div class="ty1">精选产品</div></span>
                <span>手机<div class="ty1">探索科技</div></span>
                <span>智能<div class="ty1">AI家居</div></span>
                <span>生活<div class="ty1">居家必备</div></span>
                <span>家电<div class="ty1">数码电器</div></span>
                <span>特惠<div class="ty1">多买多省</div></span>
            </div>
            <div class="tcSet">

                <div class="tc show">
                    <div class="goods">
                        <ul class="slist">
                            <li>
                                <a href="./goods.html">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='goods.html'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./Image/product/xiaomi/m14.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥3999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/redmi/k70.png" alt="goods">
                                </a>
                                <h3>Redmi K70</h3>
                                <p>第二代骁龙®8移动平台</p>
                                <span>￥2499</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/laptop/laptop1.png" alt="goods">
                                </a>
                                <h3>Redmi Book 16 2024</h3>
                                <p>超薄金属边框</p>
                                <span>￥4699</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="tc">
                    <div class="goods">
                        <ul class="slist">
                            <li>
                                <a href="./goods.html">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='goods.html'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m14.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥3999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/redmi/k70.png" alt="goods">
                                </a>
                                <h3>Redmi K70</h3>
                                <p>第二代骁龙®8移动平台</p>
                                <span>￥2499</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m13u.png" alt="goods">
                                </a>
                                <h3>Xiaomi 13 Ultra</h3>
                                <p>莱卡超级影像</p>
                                <span>￥5999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/redmi/n13.png" alt="goods">
                                </a>
                                <h3>Redmi Note 13</h3>
                                <p>IP68级防尘防水</p>
                                <span>￥1399</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/redmi/k70p.png" alt="goods">
                                </a>
                                <h3>Redmi K70 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥3499</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="tc">
                    <div class="goods">
                        <ul class="slist">
                            <!-- 智能 -->
                            <li>
                                <a href="#">
                                    <img src="./Image/product/chuandai/s3.png" alt="goods">
                                </a>
                                <h3>Xiaomi Watch S3</h3>
                                <p>百变表圈 | 小米澎湃OS</p>
                                <span>￥799</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/chuandai/s2.png" alt="goods">
                                </a>
                                <h3>Xiaomi Watch S2</h3>
                                <p>不锈钢金属中框</p>
                                <span>￥799</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="tc">
                    <div class="goods">
                        <ul class="slist">
                            <!-- 生活 -->
                            <li>
                                <a href="#">
                                    <img src="./Image/product/shenghuo/bag1.png" alt="goods">
                                </a>
                                <h3>日常元素轻行商务双肩包</h3>
                                <p>通勤差旅，轻装出行</p>
                                <span>￥199</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/shenghuo/bag2.png" alt="goods">
                                </a>
                                <h3>天生好看斜挎包</h3>
                                <p>每一种姿态，都天生好看</p>
                                <span>￥4999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>

                </div>

                <div class="tc">
                    <div class="goods">
                        <ul class="slist">
                            <!-- 家电 -->
                            <li>
                                <a href="#">
                                    <img src="./Image/product/jiadian2/tyy.png" alt="goods">
                                </a>
                                <h3>Redmi投影仪 2 Pro</h3>
                                <p>无感疾速对焦 智享大屏影院</p>
                                <span>￥1999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/jiadian/jd2.png" alt="goods">
                                </a>
                                <h3>速冷静 米家空调</h3>
                                <p>速冷静 新三级1.5匹</p>
                                <span>￥1999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="tc">
                    <div class="goods">
                        <ul class="slist">
                            <!-- 特惠 -->
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./Image/product/xiaomi/m14p.png" alt="goods">
                                </a>
                                <h3>Xiaomi 14 Pro</h3>
                                <p>第三代骁龙®8移动平台</p>
                                <span>￥4999</span>
                                <div onclick="location.href='#'" class="buybtn">立即购买</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script src="./js/tab.js"></script>
        <script src="./js/fixed.js"></script>

    </section>


    <footer>
        <nav class="bottom_nav">
            <ul class="bnav">
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true" style="color: #ff7b00;">
                            <use xlink:href="#icon-shouye2"></use>
                        </svg>
                        <p style="color: #ff7b00;">首页</p>
                    </a>
                </li>
                <li>
                    <a href="./productList.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fenlei"></use>
                        </svg>
                        <p>分类</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fuwu"></use>
                        </svg>
                        <p>服务</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouwu"></use>
                        </svg>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="./myIndex.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode3"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
    </footer>
</body>

</html>